<!--课题信息统计-->
<template>
  <div class="wrapper-container">
    <div class="search-container">
      <div style="display: flex;align-items:center">
        <div class="search-container-item right16">
          <div class="item-name">课题类别：</div>
          <el-select v-model="dataForm.name" placeholder="请选择" style="width: 110px" size="mini" @change="getNextStep">
            <el-option v-for="item in type1" :key="item.subCategoryId" :label="item.subCategoryName" :value="item.subCategoryId"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right16">
          <div class="item-name">课题活动：</div>
          <el-select v-model="dataForm.subActivityId" placeholder="请选择" style="width: 110px" size="mini" @change="getNextStep1">
            <el-option v-for="item in type2" :key="item.subActivityId" :label="item.subActivityName" :value="item.subActivityId"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right16">
          <div class="item-name">课题所属阶段：</div>
          <el-select v-model="dataForm.acScsId" placeholder="请选择" style="width: 110px" size="mini" @change="getNextStep2">
            <el-option v-for="item in type3" :key="item.acScsId" :label="item.acScsName" :value="item.acScsId"></el-option>
          </el-select>
        </div>
        <div class="search-container-item right16">
          <div class="item-name">课题所属流程：</div>
          <el-select v-model="dataForm.acScsFlowId" placeholder="请选择" style="width: 110px" size="mini">
            <el-option v-for="item in type4" :key="item.acScsFlowId" :label="item.acScsFlowName" :value="item.acScsFlowId"></el-option>
          </el-select>
        </div>
        <div class="search-button color-primary width70 right16" @click="initList">
          <img src="../../../assets/assessment/icon-search.png" alt="" />
          <span>查询</span>
        </div>
      </div>
      <div style="display: flex;">
        <!-- <div class="search-button color-primary width134 right16" @click="historyList">
            <span>查询历试数据</span>
        </div> -->
        <div class="search-button color-yellow width174 right16" @click="moreDownload" v-if="dataForm.subActivityId && dataForm.acScsId">
            <img src="../../../assets/assessment/icon-import.png" alt="" />
            <span>批量下载附件材料</span>
        </div>
        <div class="search-button color1 width90 right16" @click="noPass">
            <img src="../../../assets/assessment/icon-ydh.png" alt="" />
            <span>不通过</span>
        </div>
        <div class="search-button color2 width70 right16" @click="changeBtn">
            <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" />
            <span>变更</span>
        </div>
        <div class="search-button color1 width70" @click="repulseInfo">
            <img src="../../../assets/assessment/icon-ydh.png" alt="" />
            <span>打回</span>
        </div>

      </div>
    </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 100%" class="table-data" :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}" @selection-change="handleSelectionChange">
        <el-table-column type="selection"  width="55"></el-table-column>
        <el-table-column prop="courseName" label="序号" align="center"  width="55">
          <template slot-scope="scope">
            {{scope.$index + 1 + (parseInt(dataForm.pageNo) - 1) * 50  }}
          </template>
        </el-table-column>
        <el-table-column prop="courseName" label="操作" align="center" width="120">
          <div slot-scope="scope" style="margin-top: 10px;">
            <span class="small-btn color2 width90" @click="editInfo(scope.row)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> 编辑
            </span>
            <span class="small-btn color-yellow width90" @click="downloadFile(scope.row)">
              <img src="../../../assets/assessment/icon-import.png" alt="" /> 下载
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="subCategoryName" label="课程名称" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="currentStageName" label="当前阶段/流程" align="center" min-width="200">
          <template slot-scope="scope">
            {{scope.row.currentStageName+'/'+scope.row.currentFlowName}}
          </template>
        </el-table-column>
        <el-table-column prop="subjectId" label="课题编号" align="center" min-width="130">
          <template slot-scope="scope">
            <span class="small-btn color2" @click="editKT(scope.row)">
              <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> 输入
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="subCategoryName" label="课题类别" align="center" min-width="130">
          <template slot-scope="scope">
            <el-select style="width:100px" v-model="scope.row.projectCategory" @change="changeValue($event,scope.row)">
              <el-option label="重点" value="重点"></el-option>
              <el-option label="专项" value="专项">专项</el-option>
              <el-option label="一般" value="一般">一般</el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="statusShow" label="状态" align="center"  min-width="130"></el-table-column>
        <el-table-column prop="fillDate" label="填报日期" align="center"  min-width="200"></el-table-column>
        <el-table-column prop="subjectLeaderName" label="课程负责人" align="center" min-width="130"> </el-table-column>
        <el-table-column prop="countryInfo" label="部职别" align="center" min-width="130"></el-table-column>
        <el-table-column prop="jobTitle" label="课题负责人职称" align="center" min-width="150"></el-table-column>
        <el-table-column prop="researchObject" label="研究目标" align="center" min-width="130"></el-table-column>
        <el-table-column prop="researchContent" label="研究内容及研究方法" align="center" min-width="200"></el-table-column>
        <el-table-column prop="planResult" label="预期成果" align="center" min-width="200"></el-table-column>
        <el-table-column prop="finishDate" label="完成时限" align="center" min-width="200"></el-table-column>
        <el-table-column prop="subjectMember" label="课题组成员" align="center" min-width="200"></el-table-column>
        <el-table-column prop="buildDate" label="确定立项时间" align="center" min-width="200">
            <div slot-scope="scope">
                <el-date-picker class="time" v-model="scope.row.buildDate" type="date" value-format="yyyy-MM-dd" @change="changeLX($event,scope.row)"></el-date-picker>
            </div>
        </el-table-column>
        <el-table-column prop="checkDate" label="验收时间" align="center" min-width="200">
            <div slot-scope="scope">
                <el-date-picker class="time" v-model="scope.row.checkDate" type="date" value-format="yyyy-MM-dd" @change="changeYS($event,scope.row)"></el-date-picker>
            </div>
        </el-table-column>
        <el-table-column prop="buildTime" label="建设周期" align="center" min-width="200">
            <div slot-scope="scope">
                <el-input style="width:100px" v-model="scope.row.buildTime" @blur="jszq(scope.row)"></el-input>&nbsp;年
            </div>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center" min-width="200">
            <template slot-scope="scope">
                <el-input type="textarea" :rows="2" v-model="scope.row.remark" @blur="bz(scope.row)"></el-input>
            </template>
        </el-table-column>
        </el-table>
    </div>
    <div class="export-button" @click="importExcel">
      <img src="../../../assets/assessment/icon-export.png" alt="" />
      <span>导出Excel</span>
    </div>
    <h1 class="total-notice">当前共找到{{total}}条记录，当前显示{{(dataForm.pageNo-1)*50 == 0?1:(dataForm.pageNo-1)*50}}-{{total>50?dataForm.pageNo*50:total}}条</h1>
    <div class="pagination-block">
        <el-pagination v-if="total>50" prev-text="上一页" next-text="下一页" @current-change="currentPage"
        :page-size="50" layout="prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    
    <div class="button-group">
          <div class="" @click="nextStep">确认并进入下一步</div>
          <div class="" @click="cancelStep">取消</div>
    </div>
    <!-- 变更 -->
    <changeInfo ref="changeInfo" :fillID="fillId"></changeInfo>
    <!-- 提示 -->
    <el-dialog title="提 示" :visible.sync="dialogNotice" :close-on-click-modal="false">
      <div class="notice-css">
        <h1>您确定**课题进入下一步吗？</h1>
      </div>
      <div class="button-group notice-btn" slot="footer">
        <div class="" @click="saveNotice">确定</div>
        <div class="" @click="dialogNotice=false">取消</div>
      </div>
    </el-dialog>
    <!-- 课题编号 -->
    <ktNum ref="kt" @updateNum="initList" :fillId="fillId" :subjectId="subjectId"></ktNum>
  </div>
</template>

<script>
import {ktxxtjCX,ktNoPass,repulse,confirmNextStep,getTypeActivityList,sbJDList,getTypeActivityLC,sbSave} from "@/api/teachingTopic";

import changeInfo from './changeInfo.vue'
import ktNum from './ktNum.vue'
import fileDownload from "js-file-download"
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm:{
        name:'',
        acScsFlowId:'',//课题活动流程ID
        acScsId:'',//课题活动阶段ID
        subActivityId:'',//课题活动id
        acScsOrder:'',
        pageNo:1,
        size:50,
      },
      type1:[],
      type2:[],
      type3:[],
      type4:[],
      dialogNotice:false,
      total:1,
      tableData: [],
      gradeList:[],
      IDS:[],
      fillId:'',
      subjectId:'',
    };
  },
  components:{changeInfo,ktNum},
  mounted(){
    this.initList();
    this.commonApi.getAllType({}).then(res=>{
      this.type1 = res.data
    })
  },
  methods: {
    async changeValue(e,row){
      let res = await sbSave(row);
      if(res.code == 200){
          this.$message.success('保存成功！')
          this.initList()
      }
    },
    async changeLX(e,row){
      let res = await sbSave(row);
      if(res.code == 200){
          this.$message.success('保存成功！')
          this.initList()
      }
    },
    async jszq(row){
      let res = await sbSave(row);
      if(res.code == 200){
          this.$message.success('保存成功！')
          this.initList()
      }
    },
    async changeYS(e,row){
      let res = await sbSave(row);
      if(res.code == 200){
          this.$message.success('保存成功！')
          this.initList()
      }
    },
    async bz(row){
      let res = await sbSave(row);
      if(res.code == 200){
          this.$message.success('保存成功！')
          this.initList()
      }
    },
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.fillId)
    },
    async getNextStep(e){
      let res = await getTypeActivityList({subCategoryId:e});
      this.type2 = res.data;
    },
    async getNextStep1(e){
      let res = await sbJDList({subActivityId:e})
      console.log(res.data)
      this.type3 = res.data
    },
    async getNextStep2(e){
      this.dataForm.acScsOrder = this.type3.filter(item=>item.acScsId == e)[0].acScsOrder
      let res = await getTypeActivityLC({acScsId:e,subActivityId:this.dataForm.subActivityId})
      this.type4 = res.data
    },
    // 不通过
    async noPass(){
      let res = await ktNoPass({fillIds:this.IDS.join(',')});
      if(res.code == 200){
        this.$message.success('不通过成功！')
        this.initList()
      }
    },
    // 打回
    async repulseInfo(){
      let res = await repulse({fillIds:this.IDS.join(',')});
      if(res.code == 200){
        this.$message.success('打回成功！')
        this.initList()
      }
    },
    //变更
    changeBtn(){
      if(this.IDS.length>1){
        this.$message.error('一次只能变更一条数据！')
      }else{
        this.$refs.changeInfo.changeDialog = true;
        this.fillId = this.IDS[0].fillId;
        this.$refs.changeInfo.initList()
      }
    },
    historyList(){
      this.$router.push({path:'/teachingTopics/activity/historyList'})
    },
    nextStep(){
      this.dialogNotice = true
    },
    //确认并进入下一步
    async saveNotice(){
      let res = await confirmNextStep({fillIds:this.IDS.join(',')});
      if(res.code == 200){
        this.$message.success(res.msg);
        this.initList()
      }
    },
    cancelStep(){

    },
    async initList(){
      let res = await ktxxtjCX(this.dataForm)
      this.tableData = res.data.records
      this.total =  res.data.total
    },
    //编辑
    editInfo(row){
      this.$router.push({
        path:'/teachingTopics/activity/declareForm',
        query:{
          fillId:row.fillId,
          isFixed:row.isFixed?true:false,
          type:2
        }
      })
    },
    editKT(row){
      console.log(row)
      this.$refs.kt.dialogKT = true;
      this.subjectId = row.subjectId;
      this.fillId = row.fillId
      this.$nextTick(()=>{
        this.$refs.kt.$refs.ruleForm.resetFields();
      })
    },
    //导出
    importExcel(){
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/fillSubject/exportSpecialSubjectFill',
          params:this.dataForm,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '课题信息统计.xlsx');
      }); 
    },
    //批量下载
    moreDownload(){
      let params = {
        fillId:this.dataForm.subActivityId,
        stageId:this.dataForm.acScsId
      }
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/fillSubject/batchDownLoadFillAttr',
          params:params,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '附件.zip');
      }); 
    },
    // 下载
    downloadFile(row){
      let params = {
        fillId:row.fillId,
        stageId:row.acScsId
      }
      Axios({
          method: 'get',
          url: this.$store.state.studentUrl.baseUrl+'/fillSubject/downLoadFillAttr',
          params:params,
          headers: {'Content-Type': 'application/octet-stream' },
              responseType: 'blob'
      }).then(res => {
          fileDownload(res.data, '附件.xlsx');
      }); 
    },
  },
};
</script>
<style lang="less" scoped>
.table-css {
  margin-top: 30px;
  /deep/.el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

 /deep/ .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";
.search-container {
  justify-content: space-between !important;
  align-items: center;
}
.right16{margin-right: 16px;}
.width70{width: 70px}
.width134{width: 134px;}
.width174{width: 174px}
.width90{width: 90px;}
.small-btn{margin-bottom: 14px;}
.color-yellow{
    background: #FEF1E8;
    border: 1px solid #F86900;
    color: #F86900;
}
.color1{
    background: #ffefef;
    border: 1px solid #fa5339;
    color: #fa5339;
}
.color2{
  background: #F1FFF8;
  border: 1px solid #02C86C;
  color: #02C86C;
}
.item-name {
  color: #004ca7;
}
.fsx{
  span{
    display: block;
    margin-bottom: 10px;
  }
}
  .notice-btn{
    div{
      &:nth-child(2) {
        color: #F3B815;
        border: 1px solid #F3B815;
        background: #FFF6EF;
      }
      &:nth-child(1) {
       color: #02c86c;
       border: 1px solid #02c86c;
       background: #dfffef;
       margin-right: 55px;
      }
    }
  }
  .notice-css{
    h1{
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      line-height: 20px;
      color: #004CA7;
      margin-top:20px;
      text-align: center;
    }
  }
</style>
